<template>
  <div class="background_style">
    <div class="text-center mt-5 fs-2">校园答疑平台</div>
    <el-form :model="registry" class="border w-50 mx-auto mt-3">
      <el-form-item>
        <div class="border w-100 text-center fs-5">
          快速注册 <router-link to="/" class="a">快速登录 </router-link>
        </div>
      </el-form-item>

      <el-form-item  class="text-end w-50 mx-auto " label="用户：">
        <el-input v-model="registry.username" placeholder="用户" class="ms-auto" style="width:19rem"></el-input>
      </el-form-item>

      <el-form-item  class="text-end w-50 mx-auto " label="昵称：">
        <el-input v-model="registry.nickName" placeholder="昵称" class="ms-auto" style="width:19rem"></el-input>
      </el-form-item>

      <el-form-item  class="text-end w-50 mx-auto" label="密码：">
        <el-input v-model="registry.password" placeholder="密码" type="password" class="ms-auto" style="width:19rem"></el-input>
      </el-form-item>

      <el-form-item  class="text-end w-50 mx-auto" label="年龄：">
        <el-input v-model="registry.age" placeholder="年龄" class="ms-auto" style="width:19rem"></el-input>
      </el-form-item>

      <el-form-item  class="text-end w-50 mx-auto" label="电话：">
        <el-input v-model="registry.phone" placeholder="电话" class="ms-auto" style="width:19rem"></el-input>
      </el-form-item>

      <el-form-item  class="text-end w-50 mx-auto" label="性别：">
        <el-radio v-model="registry.sex" label="1"  >男</el-radio>
        <el-radio v-model="registry.sex"  label="2" >女</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="mx-auto mt-3" @click="registryAction"
          >同意协议并注册</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "RegistryFrame",
  data() {
    return {
      registry: {
        username: null,
        nickName:null,
        password:null,
        phone:null,
        age:null,
        sex:null,
      },
    };
  },
  methods:{
    registryAction(){
          this.$axios.post('/api/registry',this.registry)
          .then(response =>{
             let data = response.data;
             if(data.code==200){
                alert(data.msg)
                this.$router.push('/')
             }else{
                alert(data.msg);
             }
          })
    }
  }
};
</script>

<style scoped>
.background_style {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/assets/zjuc.webp");
}
.a {
  text-decoration: none;
}
</style>